<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-07-26 18:38:37
 * @LastEditTime: 2023-08-10 12:27:01
-->
<script lang="ts" setup name="SmsChannel">
import type { FormInstance } from 'element-plus'
import { useNews } from '../useNews'
import { useChannel } from './useChannel'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits<{
  (e: 'close'): void
}>()
const {
  ESendType, getMsgChannelByNo
} = useNews()
const smsForm = computed(() => props.data)
const smsFormRef: Ref<FormInstance | null> = ref(null)
const channelData: Ref<any[]> = ref([]);
(async () => {
  channelData.value = await getMsgChannelByNo()
})()
const SystemChannel = defineAsyncComponent(() => import('./SystemChannel.vue'))
const SmsTemplateChannel = defineAsyncComponent(() => import('./SmsTemplateChannel.vue'))
const { loading } = useChannel(props.isEdit, smsForm)

const SMS_CHANNEL = computed(() => channelData.value.find((item: any) => item.channel === ESendType.短信))

const cancel = () => {
  smsForm.value.enableTemplate = false
  emits('close')
}
</script>

<template>
  <el-form
    ref="smsFormRef"
    v-loading="loading"
    label-width="100px"
    :model="smsForm"
    label-position="top"
  >
    <el-form-item label="是否启用模板" prop="enableTemplate">
      <el-switch v-model="smsForm.enableTemplate" />
    </el-form-item>
    <SmsTemplateChannel v-if="smsForm.enableTemplate" :data="SMS_CHANNEL" @close="cancel()" />
    <SystemChannel
      v-else
      :data="SMS_CHANNEL"
      flag="sms"
      @close="cancel()"
    />
  </el-form>
</template>

<style lang="scss" scoped>
.ik-msg-channel{
  :deep(.el-form-item__content){
      justify-content: end;
  }
}
</style>
